<template>
	<view class="skeleton-card-list">
		<uv-skeletons :loading="loading" :animate="true" :skeleton="skeleton">
			<!-- 实际内容插槽 -->
			<slot></slot>
		</uv-skeletons>
	</view>
</template>

<script>
	export default {
		name: 'skeleton-card-list',
		props: {
			// 是否显示骨架屏
			loading: {
				type: Boolean,
				default: true
			},
			// 卡片数量
			count: {
				type: Number,
				default: 3
			},
			// 卡片样式类型：'order'|'goods'|'simple'
			type: {
				type: String,
				default: 'simple'
			}
		},
		computed: {
			skeleton() {
				// 根据不同类型返回不同的骨架屏配置
				const skeletonMap = {
					// 订单卡片骨架屏
					order: [{
						type: 'flex',
						num: this.count,
						gap: '20rpx',
						children: [{
							type: 'custom',
							style: 'width: 160rpx; height: 160rpx; margin-right: 20rpx; border-radius: 8rpx;'
						}, {
							type: 'line',
							num: 3,
							style: [
								'width: 360rpx; height: 32rpx;',
								'width: 260rpx; height: 28rpx; margin-top: 20rpx;',
								'width: 160rpx; height: 28rpx; margin-top: 20rpx;'
							]
						}]
					}],
					// 课程详情骨架屏
					course: [{
						// 课程封面
						type: 'custom',
						style: 'width: 100%; height: 400rpx; border-radius: 16rpx 16rpx 0 0;'
					}, {
						// 课程信息
						type: 'flex',
						children: [{
							type: 'line',
							num: 3,
							style: [
								'width: 80%; height: 40rpx; margin: 24rpx;', // 标题
								'width: 40%; height: 32rpx; margin: 16rpx 24rpx;', // 统计信息
								'width: 60%; height: 48rpx; margin: 20rpx 24rpx;' // 价格信息
							]
						}]
					}, 20, {
						// 课程介绍
						type: 'flex',
						children: [{
							type: 'line',
							num: 2,
							style: [
								'width: 30%; height: 36rpx; margin-bottom: 20rpx;', // 标题
								'width: 100%; height: 120rpx;' // 内容
							]
						}]
					}, 20, {
						// 课程目录
						type: 'flex',
						num: 3,
						gap: '24rpx',
						children: [{
							type: 'custom',
							style: 'width: 160rpx; height: 90rpx; border-radius: 8rpx;'
						}, {
							type: 'line',
							num: 2,
							style: [
								'width: 70%; height: 32rpx;',
								'width: 50%; height: 28rpx; margin-top: 16rpx;'
							]
						}]
					}]
				}
				
				return skeletonMap[this.type] || skeletonMap.simple
			}
		}
	}
</script>

<style lang="scss">
.skeleton-card-list {
	background-color: #fff;
	border-radius: $uni-border-radius-base;
	padding: 20rpx;
}
</style> 